<template>
  <!--避免没有数据的时候出现异常-->
  <v-touch @swiperight="onSwipeRight">
  <div v-if="filminfo">
    <!--
    background-size: cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
    background-position属性设置背景图像的起始位置。
    -->
    <detail-header v-top :title="filminfo.name"></detail-header>
    <div style="background: white">
      <div :style="{backgroundImage:'url('+filminfo.poster+')'}" style="background-size: cover;height: 200px;background-position: center"></div>
      <p style="font-weight: 550;margin: 10px 10px">
        {{filminfo.name}} <span style="background: #b6b3b3;color: white;font-size: 12px">{{filminfo.filmType.name}}</span>
      </p>
      <p class="p2">{{filminfo.category}}</p>
      <p class="p2">{{filminfo.premiereAt | format}}上映</p>
      <p class="p2">{{filminfo.nation}} | {{filminfo.runtime}}</p>
      <p :class="isShow?'synopsisNoHidden':'synopsis'">{{filminfo.synopsis}}</p>
      <p style="text-align: center;margin-top: -10px"><i class="iconfont" :class="isShow?'iconArrow-Down2':'iconArrow-Up2'" @click="isShow = !isShow"></i></p>
    </div>
    <!--演职人员-->
    <div style="margin-top: 5px;background: white;">
      <p style="padding: 10px">演职人员</p>
      <detail-swiper :perslide="3" swiperclass="swiper-actors">
        <div class="swiper-slide" v-for="(item,index) in filminfo.actors" :key="index">
          <img :src="item.avatarAddress" style="height: 120px"/>
          <div style="text-align: center">
            <p style="font-size: 12px">{{item.name}}</p>
            <p style="font-size: 10px;color: gray">{{item.role}}</p>
          </div>
        </div>
      </detail-swiper>
    </div>
    <!--剧照-->
    <div style="margin-top: 5px;margin-bottom:80px;background: white;" >
      <p style="padding: 10px">剧照</p>
      <detail-swiper :perslide="3" swiperclass="swiper-photos">
        <div class="swiper-slide" v-for="(item,index) in filminfo.photos" :key="index">
          <div :style="{backgroundImage: 'url('+item+')'}" style="height: 65px;background-size: cover;background-position: center" @click="ImagePreview(index)">
          </div>
        </div>
      </detail-swiper>
    </div>
  </div>
  </v-touch>
</template>

<script>
import http from "../util/http";
import Vue from "vue"; //@ src的绝对路径,http为axios的实例，用法与axios相同
import moment from "moment";
import detailSwiper from "./Detail/DetailSwiper";
import detailHeader from "./Detail/DetailHeader";
import { ImagePreview } from 'vant';
import {mapMutations} from "vuex";
import VueTouch from "vue-touch";

Vue.use(VueTouch,{name: 'v-touch'})

Vue.filter('format',(premiereAt) => {
  //将时间戳转换成日期,moment.js模块JavaScript 日期处理类库
  return moment(premiereAt*1000).format('YYYY-MM-DD')
})

//自定义指令
Vue.directive('top',{
  inserted(el) {
    //console.log(el) //原生dom对象
    el.style.display = 'none'
    window.onscroll = () => { //监听滚动条
      //console.log("监听滚动条")
      if ((document.body.scrollTop || document.documentElement.scrollTop) >= 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind() { //当组件被销毁时，指令也会被销毁，不再监听scroll
    window.onscroll = null
  }
})

export default {
  name: "Detail",
  data() {
    return {
      filminfo: null,
      isShow : false
    }
  },
  mounted() {

    //隐藏tabbar
    //this.$store.commit('hide',false)
    this.hide(false)

    //console.log(this.$route.params.id)
    let id = this.$route.params.id; //获取到传递过来的id，通过id拿到对应的详情信息
    http({
      url: `/gateway?filmId=${id}&k=6243259`,
      type: 'GET',
      headers: {
        "X-Host": "mall.film-ticket.film.info",
      },
    }).then(res => {
      //console.log(res.data.data.film)
      this.filminfo = res.data.data.film
    })
  },
  components: {
    detailSwiper,
    detailHeader
  },
  methods: {
    //修改tabbar状态：隐藏还是显示
    ...mapMutations('tabbarModule',['hide','show']),

    ImagePreview(index) {
      ImagePreview({
        images: this.filminfo.photos,
        startPosition: index, //指定初始位置
        closeable: true //展示关闭按钮
      });
    },

    onSwipeRight() {
      this.$router.back('/film')
    }
  },
  beforeDestroy() {
    //显示tabbar
    //this.$store.commit('show',true)
    this.show(true)
  }
}
</script>

<style scoped>
.p2 {
  font-size: 14px;color: gray;margin: 5px 10px
}
.synopsis {
  font-size: 14px;color: gray;margin: 10px 10px;
  height: 38px;
  overflow: hidden;
}
.synopsisNoHidden{
  font-size: 14px;color: gray;margin: 10px 10px;
}
</style>